import { CaretDownFilled } from '@ant-design/icons';
import styled from '@emotion/styled';
import { Dropdown, Tag } from 'antd';

import { GhostALink, GhostLink } from '@/components/base';

import RightContent from '../RightContent';

import { menuStatic } from './menuStatic';

import styles from './index.less';

const MenuItem = (props) => {
  const item = props.item;
  return (
    <MenuItemContainner>
      <span>
        {item.to ? (
          <GhostLink to={item.to}>{item.name}</GhostLink>
        ) : (
          <GhostALink target="_blank" href={item.url}>
            {item.name}
          </GhostALink>
        )}
      </span>
      {item.hot ? (
        <Tag color="red" style={{ marginLeft: 8 }}>
          HOT
        </Tag>
      ) : (
        <span />
      )}
      {item.new ? (
        <Tag color="red" style={{ marginLeft: 8 }}>
          NEW
        </Tag>
      ) : (
        <span />
      )}
    </MenuItemContainner>
  );
};

const MenuSection = (props) => {
  const section = props.section;
  return (
    <div style={{ width: '30%', ...props.style }}>
      <MenuSectionTopDiv>{section.name}</MenuSectionTopDiv>
      <MenuSectionContentDiv>
        {section.items.map((item, i) => {
          return <MenuItem item={item} key={i} />;
        })}
      </MenuSectionContentDiv>
    </div>
  );
};

const TopMenu = (props) => {
  const menu = props.menu;
  return (
    <Dropdown
      dropdownRender={() => (
        <TopMenuOverlay>
          <div style={{ display: 'flex' }}>
            <TopMenuOverlayLeft style={{ width: '308px', height: '307px' }}>
              <TopMenuOverlayLeftItem>{menu.name}</TopMenuOverlayLeftItem>
              <p style={{ color: 'rgba(0, 0, 0, 0.45)' }}>{menu.summary}</p>
            </TopMenuOverlayLeft>
            <div style={{ flex: 10, display: 'flex' }}>
              {menu.items.map((section, i) => {
                return <MenuSection section={section} key={i} />;
              })}
            </div>
          </div>
        </TopMenuOverlay>
      )}
    >
      <DropdownContent>
        <span>{menu.name}</span>
        <CaretDownFilled />
      </DropdownContent>
    </Dropdown>
  );
};

function ProductNavigator() {
  const NavTitle = (props) => {
    const {
      i,
      menu: { url, name, icon },
    } = props;
    return (
      <DropdownContent key={i}>
        {icon && icon}
        <GhostLink to={url} className={styles.nav_title}>
          {name}
        </GhostLink>
      </DropdownContent>
    );
  };

  return (
    <ProductNavigatorDiv>
      {menuStatic.map((menu, i) => {
        if (menu.items) return <TopMenu menu={menu} key={menu.name} />;
        else return <NavTitle i={i} menu={menu} key={menu.name} />;
      })}
    </ProductNavigatorDiv>
  );
}

export const headerContentRender = () => <ProductNavigator />;
export const headerRightContentRender = () => <RightContent />;

const TopMenuOverlay = styled.div`
  padding: 32px 40px;
  background-color: #fff;
  width: 100vw;
  height: 307px;
  margin-top: -8px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.03),
    0 4px 8px 0 rgba(25, 15, 15, 0.07), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  border-radius: 0 0 6px 6px;
`;

const TopMenuOverlayLeft = styled.div`
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.06);
  margin: -32px 26px 0 -40px;
  padding: 36px 16px 0 16px;
`;
const TopMenuOverlayLeftItem = styled.div`
  font-size: 14px;
  margin-bottom: 0.5em;
  color: black;
  line-height: 22px;
`;

const DropdownContent = styled.div`
  cursor: pointer;
  display: flex;
  gap: 4;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  &:hover {
    background-color: rgba(0, 0, 0, 0.03);
  }
`;

const ProductNavigatorDiv = styled.div`
  display: flex;
  align-items: center;
  margin-left: 80px;
`;

const MenuSectionTopDiv = styled.div`
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 16px;
`;

const MenuSectionContentDiv = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

const MenuItemContainner = styled.div`
  color: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  cursor: pointer;
  line-height: 22px;
  margin-bottom: 8px;
  width: 100%;
`;
